{extend name="common/base" /}
{block name="body"} 
<main>

    <div class="container layui-row">
        <div class="layui-col-md3 layui-col-xs12 personal-nav">
            <div class="personal-user-name">
                <h1>Welcome Back,<br>{$user_info.first_name}</h1>
                <p class="white-font">{$user_info.email}</p>
            </div>

            <div class="personal-nav-item">
                <p class="white-font font-size-small">PURCHASE HISTORY</p>
                <div class="unselect-button">
                    <a href="/personal-info-all-purchases.html#block">
                        <span>View All Purchases</span>
                        <img src="__ROOT__/static/__ROOT__/static/images/part2-go.png" alt="">
                    </a>

                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">PROFILE</p>
                <div class="unselect-button">
                    <a href="/personal-my-sizes.html">
                        <span>My Sizes</span>
                        <img src="__ROOT__/static/__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="select-button">
                    <a href="/personal-info.html">
                        <span>Personal Info</span>
                        <img src="__ROOT__/static/__ROOT__/static/images/go-white.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="personal-payments.html#block">
                        <span>Payments</span>
                        <img src="__ROOT__/static/__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-address-and-delivery.html">
                        <span>Address and Delivery</span>
                        <img src="__ROOT__/static/__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">SECURITY AND COMMUNICATION</p>
                <div class="unselect-button">
                    <a href="/personal-change-password.html#block">
                        <span>Change Password</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="/personal-subsc-riptions.html">
                        <span>Subsc riptions</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>

                <div class="unselect-button margin-top-sign-out">
                    <a href="/login_out.html">
                        <span>Sign Out</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12 personal-genter" id="block">
            <h1 class="personal-genter-title">Personal Info</h1>
            <ul class="layui-row layui-col-space30">
                <li class="layui-col-md6 layui-col-xs12">
                    <label class="personal-label" for="First Name">First Name</label>
                    <div class="input-style">
                        <input value="{$user_info.first_name|default=''}" name="first_name" id="first_name">
                    </div>
                </li>
                <li class="layui-col-md6 layui-col-xs12">
                    <label class="personal-label" for="First Name">Last Name</label>

                    <div class="input-style">
                        <input value="{$user_info.last_name|default=''}" name="last_name" id="last_name">
                    </div>
                </li>
                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="Email">Email</label>
                    <p class="personal-tip">Update the address used to send you account related information,such as
                        order and shipping confirmation(s).</p>

                    <div class="input-style">
                        <input value="{$user_info.email|default=''}" name="email" id="email">
                    </div>
                </li>
                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="Phone number">Phone number</label>
                    <p class="personal-tip">Update the phone number associated with your account in-store.</p>

                    <div class="input-style">
                        <input value="{$user_info.phone|default=''}" name="phone" id="phone">
                    </div>
                    <p class="personal-tip">To update your text communications.opt out via text and resubscribe at
                        <a href="#">Stay In The Know.</a>
                    </p>
                </li>
                <li class="layui-col-md12 layui-col-xs12">
                    <label class="personal-label" for="Phone number">Birthday</label>
                    <div class="input-style">
                        <input readonly value="{$user_info.birthday|default=''}" id="date" name="birthday">
                    </div>
                </li>
                <li class="layui-col-md12 layui-col-xs12 flex-end">

                    <div class="submit-button">Save Update</div>
                </li>
            </ul>
        </div>
    </div>
</main>
{/block}

{block name="js"} 
<script>
   $(document).ready(function () {
         var  laydate = layui.laydate;
         laydate.render({
            elem: '#date', //指定元素
            trigger: 'click'
        });
        // 点击保存按钮
        $('.submit-button').click(function () {
            // 获取字段值
            const firstName = $('#first_name').val().trim();
            const lastName = $('#last_name').val().trim();
            const email = $('#email').val().trim();
            const phone = $('#phone').val().trim();
            const birthday = $('#date').val().trim();

            // 验证字段是否为空
            if (!firstName) {
                layer.msg('First Name is required.', { icon: 2 });
                return;
            }
            if (!lastName) {
                layer.msg('Last Name is required.', { icon: 2 });
                return;
            }
            if (!email) {
                layer.msg('Email is required.', { icon: 2 });
                return;
            }
            if (!phone) {
                layer.msg('Phone Number is required.', { icon: 2 });
                return;
            }
            if (!birthday) {
                layer.msg('Birthday is required.', { icon: 2 });
                return;
            }

            // 验证邮箱格式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                layer.msg('Please enter a valid Email address.', { icon: 2 });
                return;
            }

            // 验证手机格式（可根据地区修改）
            // const phoneRegex = /^[0-9-+() ]{7,15}$/;
            // if (!phoneRegex.test(phone)) {
            //     layer.msg('Please enter a valid Phone Number.', { icon: 2 });
            //     return;
            // }

            // 数据准备
            const data = {
                first_name: firstName,
                last_name: lastName,
                email: email,
                phone: phone,
                birthday: birthday,
            };

            // 发送请求到后端
            ajaxRequest('/update_user', data, 'POST', this, function (response) {
                if (response.code == 1) {
                    layer.msg('Profile updated successfully!', { icon: 1 });
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    layer.msg(response?.message || 'Update failed. Please try again.', { icon: 2 });
                }
            });
          
        });
    });

</script>
{/block}
